<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>问卷调查题目</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <!-- <script src="js/content.js?v=1.0.0"></script> -->

    <!-- jQuery UI -->
    <script src="js/jquery-ui-1.10.4.min.js"></script>

    <!-- From Builder -->
    <script src="js/plugins/beautifyhtml/beautifyhtml.js"></script>

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="js/star-rating.js" type="text/javascript"></script>

    <style>
        .droppable-active {
            background-color: #ffe !important;
        }

        .tools a {
            cursor: pointer;
            font-size: 80%;
        }

        .form-body .col-md-6,
        .form-body .col-md-12 {
            min-height: 400px;
        }

        .draggable {
            cursor: move;
        }
        
        .score{
        	border: 0px solid black; 
        	border-bottom: 1px solid black; 
        	width: 120px;
        }
        
        .sort{
        	border: 0px solid black; 
        	border-bottom: 1px solid black; 
        	width: 200px;
        	margin-top: 10px;
        }
        
		#star{position:relative;width:600px;margin:10px auto;}
		#star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
		#star ul{margin:0 10px;}
		#star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(img/star.png) no-repeat;}
		#star strong{color:#f60;padding-left:10px;}
		#star li.on{background-position:0 -28px;}
		#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(img/icon.gif) no-repeat;padding:7px 10px 0;}
		#star p em{color:#f60;display:block;font-style:normal;}
	</style>	

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>常用题型</h5>
                        <div class="ibox-tools">
                            <!-- <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_editors.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="form_editors.html#">选项1</a>
                                </li>
                                <li><a href="form_editors.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a> -->
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="alert alert-info">
                            拖拽左侧的题型到右侧区域，即可生成相应问卷。
                        </div>
                        <form role="form" class="form-horizontal m-t">
                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label">简答题：</label>
                                <div class="col-sm-9">
                            		<input type="text" class="form-control" id="textTitle" placeholder="请输标题" />
                                    <input type="text" id="textQuestion" name="" class="form-control" placeholder="请输入文本">
                                </div>
                            </div>
                            <!-- <div class="form-group draggable">
                                <label class="col-sm-3 control-label">密码框：</label>
                                <div class="col-sm-9">
                                	<input type="text" class="form-control" placeholder="请输标题" />
                                    <input type="password" class="form-control" name="password" placeholder="请输入密码">
                                </div>
                            </div> -->
                            <!-- <div class="form-group draggable">
                                <label class="col-sm-3 control-label">下拉列表：</label>
                                <div class="col-sm-9">
                                	<input type="text" class="form-control" placeholder="请输标题" />
                                    <select class="form-control" name="">
                                        <option>选项 1</option>
                                        <option>选项 2</option>
                                        <option>选项 3</option>
                                        <option>选项 4</option>
                                    </select>
                                </div>
                            </div> -->
                            <!-- <div class="form-group draggable">
                                <label class="col-sm-3 control-label">文件域：</label>
                                <div class="col-sm-9">
                                	<input type="text" class="form-control" placeholder="请输标题" />
                                    <input type="file" name="" class="form-control">
                                </div>
                            </div> -->
                            <!-- <div class="form-group draggable">
                                <label class="col-sm-3 control-label">纯文本：</label>

                                <div class="col-sm-9">
                                    <p class="form-control-static">这里是纯文字信息</p>
                                </div>
                            </div> -->
                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label">单选题：
                                </label>

                                <div class="col-sm-9">
	                            	<input type="text" class="form-control" id="radioTitle" placeholder="请输标题" />
	                            	<span>
                                    <label class="radio-inline">
                                        <input type="radio" value="option1" id="optionsRadios1" name="optionsRadios"><span onclick="changeToInput(aaa)">选项1</span>&nbsp;&nbsp;<a class="remove-option-link" hidden="true"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a></label><br>
                                    </span>
                                    <span>
                                    <label class="radio-inline">
                                        <input type="radio" value="option2" id="optionsRadios2" name="optionsRadios"><span onclick="changeToInput(aaa)">选项2</span>&nbsp;&nbsp;<a class="remove-option-link" hidden="true"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a></label><br>
									</span>
                                </div>
                            </div>
                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label">多选题：</label>

                                <div class="col-sm-9">
	                            	<input type="text" class="form-control" id="checkboxTitle" placeholder="请输标题" />
	                            	<span>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" id="inlineCheckbox1"><span onclick="changeToInput(aaa)">选项1</span>&nbsp;&nbsp;<a class="remove-option-link" hidden="true"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a></label><br>
                                    </span>
                                    <span>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" id="inlineCheckbox2"><span onclick="changeToInput(aaa)">选项2</span>&nbsp;&nbsp;<a class="remove-option-link" hidden="true"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a></label><br>
                                    </span>
                                    <span>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" id="inlineCheckbox3"><span onclick="changeToInput(aaa)">选项3</span>&nbsp;&nbsp;<a class="remove-option-link" hidden="true"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a></label><br>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label">评分题：</label>
                                <div class="col-sm-9">
                                	<input type="text" class="form-control" id="scoreTitle" placeholder="请输标题" />
                                	<div id="star">
										<span><input type="text" placeholder="评分类型" class="score" id="scoreQuestion" /></span>
										<ul>
										<li><a href="javascript:;">1</a></li>
										<li><a href="javascript:;">2</a></li>
										<li><a href="javascript:;">3</a></li>
										<li><a href="javascript:;">4</a></li>
										<li><a href="javascript:;">5</a></li>
										</ul>
										<span></span>
										<p></p>
										&nbsp;&nbsp;<a class="remove-score-link" hidden="true"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a>
									</div>
                                </div>
                            </div>
                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label">排序题：</label>
                                <div class="col-sm-9">
                                	<input type="text" class="form-control" id="sortTitle" placeholder="请输标题" />
                                	<div id="sort">
										<span><input type="text" placeholder="排序类型" class="sort" id="sortQuestion" /></span>
										&nbsp;&nbsp;<a class="remove-score-link" hidden="true"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a>
									</div>
                                </div>
                            </div>
                            <!-- <div class="hr-line-dashed"></div>
                            <div class="form-group draggable">
                                <div class="col-sm-12 col-sm-offset-3">
                                    <button class="btn btn-primary" type="submit">保存内容</button>
                                    <button class="btn btn-white" type="submit">取消</button>
                                </div>
                            </div> -->
                        </form>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-7">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>拖拽左侧题型到此区域</h5>
                        <div class="ibox-tools">
                            <!-- 请选择显示的列数：
                            <select id="n-columns">
                                <option value="1">显示1列</option>
                                <option value="2">显示2列</option>
                            </select> -->
                        </div>
                    </div>

                    <div class="ibox-content">
                    	<div style="text-align: center;font-size: xx-large;">
                    		<span onclick="changeToInputTitle(this)" style="cursor: pointer;" id="orgTitle">点击编辑主题</span>
                    	</div>
                        <div class="row form-body form-horizontal m-t">
                            <div class="col-md-12 droppable sortable">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning" data-clipboard-text="testing" id="saveBtn">保存</button>
                        <button type="submit" class="btn btn-warning" data-clipboard-text="testing" id="previewBtn">预览</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    
<script type="text/javascript"> 
window.onload = function ()
{
 var oStar = document.getElementById("star");
 var aLi = oStar.getElementsByTagName("li");
 var oUl = oStar.getElementsByTagName("ul")[0];
 var oSpan = oStar.getElementsByTagName("span")[1];
 var oP = oStar.getElementsByTagName("p")[0];
 var i = iScore = iStar = 0;
 var aMsg = [
    "很不满意",
    "不满意",
    "一般",
    "满意",
    "非常满意"
    ]
 for (i = 1; i <= aLi.length; i++)
 {
  aLi[i - 1].index = i;
  //鼠标移过显示分数
  aLi[i - 1].onmouseover = function ()
  {
   fnPoint(this.index);
   //浮动层显示
   oP.style.display = "block";
   //计算浮动层位置
   oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
   //匹配浮动层文字内容
   oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
  };
  //鼠标离开后恢复上次评分
  aLi[i - 1].onmouseout = function ()
  {
   fnPoint();
   //关闭浮动层
   oP.style.display = "none"
  };
  //点击后进行评分处理
  aLi[i - 1].onclick = function ()
  {
   iStar = this.index;
   oP.style.display = "none";
   oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
  }
 }
 //评分处理
 function fnPoint(iArg)
 {
  //分数赋值
  iScore = iArg || iStar;
  for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
 }
};
</script>

    <script>
        $(document).ready(function () {
            setup_draggable();
            $(".rating-kv").rating();

            $("#n-columns").on("change", function () {
                var v = $(this).val();
                if (v === "1") {
                    var $col = $('.form-body .col-md-12').toggle(true);
                    $('.form-body .col-md-6 .draggable').each(function (i, el) {
                        $(this).remove().appendTo($col);
                    })
                    $('.form-body .col-md-6').toggle(false);
                } else {
                    var $col = $('.form-body .col-md-6').toggle(true);
                    $(".form-body .col-md-12 .draggable").each(function (i, el) {
                        $(this).remove().appendTo(i % 2 ? $col[1] : $col[0]);
                    });
                    $('.form-body .col-md-12').toggle(false);
                }
            });

            $("#copy-to-clipboard").on("click", function () {
                var $copy = $(".form-body").clone().appendTo(document.body);
                $copy.find(".tools, :hidden").remove();
                $.each(["draggable", "droppable", "sortable", "dropped",
    "ui-sortable", "ui-draggable", "ui-droppable", "form-body"], function (i, c) {
                    $copy.find("." + c).removeClass(c).removeAttr("style");
                })
                var html = html_beautify($copy.html());
                $copy.remove();

                $modal = get_modal(html).modal("show");
                $modal.find(".btn").remove();
                $modal.find(".modal-title").html("复制HTML代码");
                $modal.find(":input:first").select().focus();

                return false;
            })


        });

        var flag = 0;
        
        var setup_draggable = function () {
            $(".draggable").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $(".droppable").droppable({
                accept: ".draggable",
                helper: "clone",
                hoverClass: "droppable-active",
                drop: function (event, ui) {
                    $(".empty-form").remove();
                    var $orig = $(ui.draggable);
                    if (!$(ui.draggable).hasClass("dropped")) {
                        var $el = $orig
                            .clone()
                            .addClass("dropped " + flag)
                            .css({
                                "position": "static",
                                "left": null,
                                "right": null
                            })
                            .appendTo(this);

                        // update id
                        var id = $orig.find(":input").attr("id");
						/* var tempTitle = id;
                        if (id) {
                            id = id.split("-").slice(0, -1).join("-") + "-" + (parseInt(id.split("-").slice(-1)[0]) + 1)

                            $orig.find(":input").attr("id", id);
                            $orig.find("label").attr("for", id);
                        } */
                        // tools
                        if(id == 'textTitle'){
                        	$('<p class="tools col-sm-12 col-sm-offset-3" style="line-height:30px;">\
            						<a class="remove-link"><img alt="移除这个题目" title="移除这个题目" width="15px" height="15px" src="img/icon/x_alt.png" /></a></p>').appendTo($el);
                        } else {
                        	$('<p class="tools col-sm-12 col-sm-offset-3" style="line-height:30px;">\
                                    <a class="add-link"><img alt="添加一个选项" title="添加一个选项" width="15px" height="15px" src="img/icon/plus_alt.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;\
            						<a class="remove-link"><img alt="移除这个题目" title="移除这个题目" width="15px" height="15px" src="img/icon/x_alt.png" /></a></p>').appendTo($el);
                        }
                        
                        flag++;
                        $el.html($el.html().replace('简答题','第' + flag + '题').replace('单选题','第' + flag + '题').replace('多选题','第' + flag + '题').replace('评分题','第' + flag + '题').replace('排序题','第' + flag + '题'));
                        var inputLength = $el.html().split('aaa').length;
                        for(var i = 0; i < inputLength; i++){
                        	$el.html($el.html().replace('aaa','this').replace('hidden="true"',''));
                        }
                        var classLength = $el.html().split('class="on"').length;
                       	for (var j = 0; j < classLength; j++) {
                       		$el.html($el.html().replace('class="on"','class'));
						}
                    } else {
                        if ($(this)[0] != $orig.parent()[0]) {
                            var $el = $orig
                                .clone()
                                .css({
                                    "position": "static",
                                    "left": null,
                                    "right": null
                                })
                                .appendTo(this);
                            $orig.remove();
                        }
                    }
                }
            }).sortable();

        }

        var get_modal = function (content) {
        	
            var modal = $('<div class="modal" style="overflow: auto;" tabindex="-1">\
			<div class="modal-dialog">\
				<div class="modal-content">\
					<div class="modal-header">\
						<a type="button" class="close"\
							data-dismiss="modal" aria-hidden="true">&times;</a>\
						<h4 class="modal-title">编辑题目</h4>\
					</div>\
					<div class="modal-body ui-front">\
						<span class="form-control-fresh" \
							style="min-height: 200px; margin-bottom: 10px;\
							font-family: Monaco, Fixed">' + content + '</span>\
						<button class="btn btn-success">更新</button>\
					</div>\
				</div>\
			</div>\
			</div>').appendTo(document.body);

            return modal;
        };

        $(document).on("click", ".edit-link", function (ev) {
            var $el = $(this).parent().parent();
            var $el_copy = $el.clone();

            var $edit_btn = $el_copy.find(".edit-link").parent().remove();

            var $modal = get_modal(html_beautify($el_copy.html())).modal("show");
            $modal.find(":input:first").focus();
            $modal.find(".btn-success").click(function (ev2) {
                var html = $modal.find("span").html();
                alert(html);
                if (!html) {
                    $el.remove();
                } else {
                    $el.html(html);
                    $edit_btn.appendTo($el);
                }
                $modal.modal("hide");
                return false;
            })
        });
        
        $(document).on("click", ".remove-link", function (ev) {
        	$(this).parent().parent().remove();
        });
        
        $(document).on("click", ".add-link", function (ev) {
        	var obj = $(this).parent().parent().children('.col-sm-9');
        	var num = obj.html().split('changeToInput(this)').length;
        	if (obj.html().indexOf('radio') > -1) {
	            $('<span><label class="radio-inline">\
                        <input type="radio" value="option' + num + '" id="optionsRadios' + num + '" name="optionsRadios"><span onclick="changeToInput(this)">选项' + num + '</span>&nbsp;&nbsp;<a class="remove-option-link"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a></label><br></span>').appendTo(obj);
			} else if (obj.html().indexOf('checkbox') > -1) {
	            $('<span><label class="checkbox-inline">\
	                    <input type="checkbox" value="option' + num + '" id="inlineCheckbox' + num + '"><span onclick="changeToInput(this)">选项' + num + '</span>&nbsp;&nbsp;<a class="remove-option-link"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a></label><br></span>').appendTo(obj);
			} else if (obj.html().indexOf('star') > -1) {
				$('<div id="star"><span><input type="text" id="scoreQuestion" placeholder="评分类型" class="score" /></span>\
					<ul><li><a href="javascript:;">1</a></li>\
					<li><a href="javascript:;">2</a></li>\
					<li><a href="javascript:;">3</a></li>\
					<li><a href="javascript:;">4</a></li>\
					<li><a href="javascript:;">5</a></li>\
					</ul><span></span><p></p>\
					&nbsp;&nbsp;<a class="remove-score-link"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a>\
					</div>').appendTo(obj);
			} else if (obj.html().indexOf('sort') > -1) {
				$('<div id="sort">\
						<span><input type="text" placeholder="排序类型" class="sort" id="sortQuestion" /></span>\
						&nbsp;&nbsp;<a class="remove-score-link"><img alt="删除这个选项" title="删除这个选项" width="15px" height="15px" src="img/icon/minus_alt.png" /></a>\
					</div>').appendTo(obj);
			}
        });
        
        $(document).on("click", ".remove-option-link", function(){
        	var obj = $(this).parent().parent().remove();
        });
        
        $(document).on("click", ".remove-score-link", function(){
        	var obj = $(this).parent().remove();
        });
        
		function changeToInput(obj) {  
		    var Newobj = document.createElement('input');
		    Newobj.value=obj.innerText;  
		    Newobj.setAttribute("type","text");  
		    Newobj.setAttribute("class","Input_Text");  
		    Newobj.setAttribute("name",obj.name);  
		    Newobj.setAttribute("onblur","changeToSpan(this)");  
		    //插入替换后的Input  
		    obj.parentNode.insertBefore(Newobj,obj.nextSibling);  
		    //删除表单原控件  
		      //obj.removeNode();  
		    obj.parentNode.removeChild(obj);  
		 }  
		
        function changeToSpan(obj){
        	var Newobj = document.createElement('span');
        	Newobj.innerHTML=obj.value;
        	Newobj.setAttribute("onclick","changeToInput(this)");
        	//插入替换后的Input  
		    obj.parentNode.insertBefore(Newobj,obj.nextSibling); 
		    //删除表单原控件  
		      //obj.removeNode();  
		    obj.parentNode.removeChild(obj);  
        }
        
        function changeToInputTitle(obj) {  
		    var Newobj = document.createElement('input');
		    Newobj.value=obj.innerText;  
		    Newobj.setAttribute("type","text");  
		    Newobj.setAttribute("class","Input_Text_Title");  
		    Newobj.setAttribute("name",obj.name);  
		    Newobj.setAttribute("onblur","changeToSpanTitle(this)");  
		    //插入替换后的Input  
		    obj.parentNode.appendChild(Newobj);  
		    //删除表单原控件  
		      //obj.removeNode();  
		    obj.parentNode.removeChild(obj);  
		    Newobj.focus();
		 }
        
        function changeToSpanTitle(obj){
        	var Newobj = document.createElement('span');
        	Newobj.innerHTML=obj.value;
        	Newobj.setAttribute("onclick","changeToInputTitle(this)");
        	Newobj.setAttribute("id","orgTitle");
        	Newobj.setAttribute("style","cursor: pointer;");
        	//插入替换后的Input  
		    obj.parentNode.appendChild(Newobj);  
		    //删除表单原控件  
		      //obj.removeNode();  
		    obj.parentNode.removeChild(obj);  
        }
        
        $(document).on("click","body", function(ev){
        	$('.Input_Text').focus();
        });
    </script>
	<script type="text/javascript" src="js/json_parse.js"></script>
	<script type="text/javascript" src="js/saveSurvey.js"></script>
    
    
</body>

</html>
